<template>
  <a-modal
    :title="title"
    :visible="visible"
    :confirm-loading="confirmLoading"
    cancel-text="关闭"
    @ok="submit"
    @cancel="closeModal"
  >
    <a-spin :spinning="confirmLoading">
      <a-card>
        <a-checkable-tag color="blue" v-for="(item , index) in catUl" :key="index" v-model="item.check" @change="checkChange(index)">{{item.name}}</a-checkable-tag>
      </a-card>
      <a-card>
        <a-checkable-tag color="blue" v-for="(item , index) in cat2Ul" :key="index" v-model="item.check" @change="checkChange2(index)">{{item.name}}</a-checkable-tag>
      </a-card>
    </a-spin>
  </a-modal>
</template>
<script>
import Category from "@/api/common/category";
import ApiTree from "@/api/goods/goodsList";
import ImageUpload from '@/components/ImageUpload';
import { Slime } from '@/mixins/slime';
export default {
  name: 'merchantPwdModal',
  components: { ImageUpload },
  data() {
    return {
      title: '修改类目',
      goodsId:0,
      catUl:[
        {id:0, name:'', check: false},
      ],
      cat2Ul:[
        {id:0, name:'', check: false},
      ],
      catIdChoose:0,
      catId2Choose:0,
    };
  },
  mixins: [Slime],
  methods: {
    // 详情
    open(catId,catId2,goodsId,merchantId) {
      this.visible = true;
      this.goodsId = goodsId
      this.catIdChoose = catId;
      this.catId2Choose = catId2;
      Category.getMerchantCats(merchantId).then((res) => {
        let data = res.result;
        this.catUl = data.map((obj)=>{
          let check = false
          if(catId == obj.id){
            check = true;
          }
          return obj = {
            id: obj.id,
            name: obj.name,
            check: check
          }
        });
      });
      Category.getList({pid: catId}).then((res) => {
        let data = res.result;
        this.cat2Ul = data.map((obj)=>{
          let check = false
          if(catId2 == obj.id){
            check = true;
          }
          return obj = {
            id: obj.id,
            name: obj.name,
            check: check
          }
        });
      });
    },
    //点击第一类目
    checkChange(index){
      const that = this;
      for(let i=0;i<this.catUl.length;i++){
        this.catUl[i].check = false
      }
      this.catUl[index].check = true
      this.catIdChoose = this.catUl[index].id;
      this.catId2Choose = 0
      Category.getList({pid: that.catUl[index].id}).then((res) => {
        let data = res.result;
        that.cat2Ul = data.map((obj)=>{
          return obj = {
            id: obj.id,
            name: obj.name,
            check: false
          }
        });
      });
    },
    //点击第二类目
    checkChange2(index){
      for(let i=0;i<this.cat2Ul.length;i++){
        this.cat2Ul[i].check = false
      }
      this.cat2Ul[index].check = true
      this.catId2Choose = this.cat2Ul[index].id;
    },
    // 提交
    submit() {
      const that = this;
      if(this.catIdChoose == 0 || this.catId2Choose == 0){
        this.$message.warning('类目为空');
        return false
      }
      let param = {
        goodsId: this.goodsId,
        catId: this.catIdChoose,
        catId2: this.catId2Choose,
      }
      ApiTree.detailUpdateCats(param).then((res) => {
        if(res.code == 0){
          that.$message.success('操作成功');
          that.closeModal();
        }else{
          that.$message.warning(res.message);
        }
      });
    },
    // 弹窗-关闭
    closeModal() {
      this.confirmLoading = false;
      this.visible = false;
      this.$emit('closeModal');
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>